<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">
    <div class="app-container">
      <el-card shadow="never" class="search-card-box">
    <el-form :inline="true"
    label-width="100px">
      <el-form-item label="订单编号:">
        <el-input placeholder="请输入订单编号" style="width: 270px; margin-right: 33px;" v-model="ordersData.id"></el-input>
      </el-form-item>
      <el-form-item label="订单状态:" >
        <el-select placeholder="请输入订单状态" v-model="ordersData.status" >
          <el-option
              v-for="item in statusData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              > 
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付费状态:" >
        <el-select placeholder="请输入付费状态" v-model="ordersData.paymentStatus">
          <el-option
              v-for="item in paymentStatusData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              > 
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发件人姓名:" >
        <el-input placeholder="请输入发件人姓名" style="width: 270px; margin-right: 33px;" v-model="ordersData.senderName"></el-input>
      </el-form-item>
      <el-form-item label="发件人电话:">
        <el-input placeholder="请输入发件人电话" style="width: 270px; margin-right: 33px;" v-model="ordersData.senderPhone"></el-input>
      </el-form-item>
      <el-form-item label="发件人地址:">
        <el-select placeholder="请输入" style="width: 84px ; margin-right:5px ;" v-model="ordersData.senderProvinceId" @change="sendercitys">
          <el-option
              v-for="item in provinceData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
        <el-select placeholder="请输入" style="width: 84px ; margin-right:5px ;" v-model="ordersData.senderCityId" @change="senderareas">
          <el-option
              v-for="item in sendercityData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
        <el-select placeholder="请输入" style="width: 84px ; margin-right:5px ;" v-model="ordersData.senderCountyId" >
          <el-option
              v-for="item in senderareaData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收件人姓名:">
        <el-input placeholder="请输入收件人姓名" style="width: 270px; margin-right: 33px;" v-model="ordersData.receiverName"></el-input>
      </el-form-item>
      <el-form-item label="收件人电话:" value="">
        <el-input placeholder="请输入收件人电话" style="width: 270px; margin-right: 33px;" v-model="ordersData.receiverPhone"></el-input>
      </el-form-item>
      <el-form-item label="收件人地址:">
        <el-select placeholder="请输入" style="width: 84px; margin-right:5px;" v-model="ordersData.receiverProvinceId" @change="receivercitys">
          <el-option
              v-for="item in provinceData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
        <el-select placeholder="请输入" style="width: 84px; margin-right:5px;" v-model="ordersData.receiverCityId" @change="receiverareas">
          <el-option
              v-for="item in receivercityData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
        <el-select placeholder="请输入" style="width: 84px; margin-right:5px;" v-model="ordersData.receiverCountyId" >
          <el-option
              v-for="item in receiverareaData"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
              > 
            </el-option>
        </el-select>
      </el-form-item>
     <el-form-item >
      <el-button   style="width: 90px; height: 40px; background-color: #e15536; color: #fff;" @click="listOKbtn">搜索</el-button>
      <el-button style="width: 90px;" @click="resetbtn">重置</el-button>
     </el-form-item>
    </el-form>
  </el-card>
  <el-card shadow="never" class="search-card-box" style="margin-top: 20px;">
    <el-table :data="orderFrom">
      <el-table-column
      label="序号"
      width="60px"
      >
      <template slot-scope="scope">
            {{ (scope.$index+1)+(params.page-1)*params.pageSize }}
          </template>
      </el-table-column>
      <el-table-column
      label="订单编号"
      width="160px"
      prop="id">

      </el-table-column>
      <el-table-column
      label="运单编号"
      width="130px"
      prop="transportOrder.id">

      </el-table-column>
      <el-table-column
      label="下单时间"
      width="160px"
      prop="createTime">

      </el-table-column>
      <el-table-column
      label="订单状态"
      width="90px"
      >
      <template #default="{ row }">
      <span v-if=" row.status === 23000">待取件</span>
      <span v-else-if=" row.status === 23001">已取件</span>
      <span v-else-if=" row.status === 23002">网点自寄</span>
      <span v-else-if=" row.status === 23003">网点入库</span>
      <span v-else-if=" row.status === 23004">待装车</span>
      <span v-else-if=" row.status === 23005">运输中</span>
      <span v-else-if=" row.status === 23006">网点出库</span>
      <span v-else-if=" row.status === 23007">待派送</span>
      <span v-else-if=" row.status === 23008">派送中</span>
      <span v-else-if=" row.status === 23009">已签收</span>
      <span v-else-if=" row.status === 23010">已拒收</span>
      <span v-else-if=" row.status === 23011">已取消</span>
      </template>
      </el-table-column>
      <el-table-column
      label="发件人姓名"
      width="100px"
      prop="senderName">

      </el-table-column>
      <el-table-column
      label="发件人电话"
      width="120px"
      prop="senderPhone">

      </el-table-column>
      <el-table-column
      label="发件人地址"
      width="150px"
      >
      <template #default="{ row }">
      {{ row.senderProvince.name }} {{ row.senderCity.name }} {{ row.senderCounty.name }} {{ row.senderAddress }}
      </template>
      </el-table-column>
      <el-table-column
      label="收件人姓名"
      width="100px"
      prop="receiverName">

      </el-table-column>
      <el-table-column
      label="收件人电话"
      width="120px"
      prop="receiverPhone">

      </el-table-column>
      <el-table-column
      label="收件人地址"
      width="120px"
      >
      <template #default="{ row }">
      {{ row.receiverProvince.name }} {{ row.receiverCity.name }} {{ row.receiverCounty.name }} {{ row.receiverAddress }}
      </template>
      </el-table-column>
      <el-table-column
      label="取件类型"
      width="100px"
      >
      <template #default="{ row }">
      <span v-if="row.pickupType === 1">网点自寄</span>
      <span v-else>上门取件</span>
      </template>
      </el-table-column>
      <el-table-column
      label="付费类型"
      width="100px"
      >
      <template #default="{ row }">
      <span v-if="row.paymentMethod === 1">预结</span>
      <span v-else>到付</span>
      </template>
      </el-table-column>
      <el-table-column
      label="付费状态"
      width="100px"
      >
      <template #default="{ row }">
      <span v-if="row.paymentStatus === 1">未付</span>
      <span v-else>已付</span>
      </template>
      </el-table-column>
      <el-table-column
      label="操作"
      width="85px"
      fixed="right">
      <template #default="{ row }">
      <el-button type="text" @click=" ViewEditorder(row)">查看详情</el-button>
    </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="params.pageSize"
          :current-page="params.page"
          @current-change="handleCurrenChange"
          @size-change="handleSizeChange"
          ></el-pagination>
        </el-row>
  </el-card>
  </div>

  </div>
</template>
<script>
import { orderList } from '@/api/order'
import statusData from '@/api/orderstatus.json'
import provinceData from '@/api/city.json'
import router from '@/router'
export default {
  data(){
    return{
      // 获取数据表格
      orderFrom:[],
      // 监听表单
      ordersData:{
        id:'',//订单编号
        status:"",//订单状态
        paymentStatus:"",//付款状态
        senderName:"",//发件人姓名
        receiverPhone:"",//发件人电话
        senderProvinceId:"",//发件人省份id
        senderCityId:"",//发件人城市id
        senderCountyId:"",//发件人地区id
        receiverName:"",//收件人姓名
        receiverPhone:"",//收件人电话
        receiverProvinceId:"",//收件人省份id
        receiverCityId:"",//收件人城市id
        receiverCountyId:"",//收件人地区id
        page:1,
        pageSize: 10,
      },
      // 订单的状态
      statusData:[],
      // 订单付款状态
      paymentStatusData:[
        {id:1,name:'未付'},
        {id:2,name:'已付'}, 
        ],
      // 省份数据
      provinceData:provinceData,
      // 发件人城市数据
      sendercityData:[],
      // 发件人地区数据
      senderareaData:[],
      // 收件人城市数据
      receivercityData:[],
      // 收件人地区数据
      receiverareaData:[],
      // 总数据数量
      total:0,
      //初始页数 页尺
      params:{
        page:1,
        pageSize: 10,
      },
    }
  },
  created(){
    this.orderList(this.params)
    
    this.statusData = statusData.status
    

  },
  methods:{
     // 分页
     handleCurrenChange(page) {
      this.params.page = page
      this.orderList(this.params)
      },
      handleSizeChange(val){
        this.params.pageSize = val
        this.orderList(this.params)
      },
      // 获取订单分页数据
    async orderList(data){
      //  data = this.params 
      const res = await orderList(data)
      this.orderFrom = res.data.items
      // console.log(this.orderFrom);
      this.total = +res.data.counts
      console.log(this.orderFrom);
     
    },
    // 发起人城市数据
    sendercitys(){
      const data = this.provinceData.filter(item => 
        item.areaId === this.ordersData.senderProvinceId
      )
      this.sendercityData = data[0].cities
      this.ordersData.senderCityId = ''
      this.ordersData.senderCountyId = ''
      // console.log(this.cityData);  
    },
    // 发起人地区数据
    senderareas(){
      this.senderareaData = this.sendercityData.filter(item => 
        item.areaId === this.ordersData.senderCityId
      )[0].counties
      this.ordersData.senderCountyId = ''
    },
    // 收件人城市数据
    receivercitys(){
      this.receivercityData = this.provinceData.filter(item => 
        item.areaId === this.ordersData.receiverProvinceId
      )[0].cities
      this.ordersData.receiverCityId = ''
      this.ordersData.receiverCountyId = ''
    },
    // 收件人地区数据
    receiverareas(){
      this.receiverareaData = this.receivercityData.filter(item => 
        item.areaId === this.ordersData.receiverCityId
      )[0].counties
      this.ordersData.receiverCountyId = ''
    },
    // 搜索按钮
    listOKbtn(){
      this.orderList(this.ordersData)
    },
    // 取消按钮
    resetbtn(){
      this.ordersData={
        id:'',//订单编号
        status:"",//订单状态
        paymentStatus:"",//付款状态
        senderName:"",//发件人姓名
        receiverPhone:"",//发件人电话
        senderProvinceId:"",//发件人省份id
        senderCityId:"",//发件人城市id
        senderCountyId:"",//发件人地区id
        receiverName:"",//收件人姓名
        receiverPhone:"",//收件人电话
        receiverProvinceId:"",//收件人省份id
        receiverCityId:"",//收件人城市id
        receiverCountyId:"",//收件人地区id
        page:1,
        pageSize: 10,
      }
      this.orderList(this.params)

    },
    // 详情页
    ViewEditorder(row){
      this.$router.push(`edit-order/${row.id}`)
      // console.log(row.id);
      
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.el-form-item__label{
  font-weight: normal;
  
}

// .el-input{
//   width: 270px;
//   margin-right: 33px;
// }
.el-select{
  width: 270px;
  margin-right: 33px;
}
.box{
  margin-top: 20px;
  margin-left: 20px;
  width: 1300px;
  height: 263px;
  background-color: #fff;
  padding: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}

// 下拉框
::v-deep .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
